import React from 'react';
import styles from './App.module.less';
import classnames from 'classnames';
import { useState } from 'react';

// class Header extends React.Component {
//   render(){
//     return (
//       <>
//       </>
//     )
//   }
// }
// export default Header

const Header = (porps: any) => {
  const [istrue, setIstrue] = useState(false);
  const click = () => {
    setIstrue(!istrue)
  }
  return( 
    <>
      <div className={styles.container}>
        <div className={styles.child1}>
          <div className={styles.child2}>1</div>
          <div className={styles.child3}>
            <div className= {styles.child3header}>
              <div className={styles.child3header1}>
                <div className={styles.child3header1_1}>1-1</div>
                <div className={styles.child3header1_2}>1-2</div>
              </div>
              <div className={styles.child3header2}>2</div>
            </div>
            <div onClick= {click} className={classnames(styles.child3conenxt,{[styles.move]: istrue})}>4</div>
          </div>
        </div>
      </div>
    </>
  )
}

export default Header